<template>
  <el-form :inline="true" class="demo-form-inline" v-model="IdForm">
    <el-form-item label="一级分类" >
      <el-select placeholder="请选择" v-model="IdForm.Category1Id" @change="getCategory2Id" :disabled="!show">
        <el-option :label="c1.name" :value="c1.id" v-for="(c1,index) in Category1List" :key="c1.id"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="二级分类">
      <el-select placeholder="请选择" v-model="IdForm.Category2Id" @change="getCategory3Id" :disabled="!show">
        <el-option :label="c2.name" :value="c2.id" v-for="(c2,index) in Category2List" :key="c2.id"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="三级分类">
      <el-select placeholder="请选择" v-model="IdForm.Category3Id" @change="getAttrList" :disabled="!show">
        <el-option :label="c3.name" :value="c3.id" v-for="(c3,index) in Category3List" :key="c3.id"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: "CategorySelect",
  props:['show'],
  data(){
    return{
      //表单form双向绑定三级分类id
      IdForm:{
        Category1Id:"",
        Category2Id:"",
        Category3Id:"",
      },
      //一级分类属性列表
      Category1List:[],
      //二级分类属性列表
      Category2List:[],
      //三级分类属性列表
      Category3List:[],
    }
  },
  mounted(){
    this.getCategory1Id();
  },
  methods:{
    //获取一级分类的分类列表
    async getCategory1Id(){
      const result=await this.$API.default.attr.reqCategory1Id();
      // console.log(result)
      if(result.code==200){
        this.Category1List=result.data;
      }
    },
    //根据一级分类的id和获取二级分类列表
    async getCategory2Id(){
      //清除数据
      this.Category2List=[];
      this.Category3List=[];
      this.IdForm.Category2Id="";
      this.IdForm.Category3Id="";

      const result=await this.$API.default.attr.reqCategory2Id(this.IdForm.Category1Id);
      // console.log(result)
      if(result.code==200){
        this.Category2List=result.data;
      }
    },
    //根据二级分类的id和获取三级分类列表
    async getCategory3Id(){
      //清除数据
      this.Category3List=[];
      this.IdForm.Category3Id="";

      const result=await this.$API.default.attr.reqCategory3Id(this.IdForm.Category2Id);
      // console.log(result)
      if(result.code==200){
        this.Category3List=result.data;
      }
    },
    getAttrList(){
      //子传父，传递IdForm对象参数
      // console.log('getSkuList');
      this.$emit('getAttrList',this.IdForm);
    },

  }
}
</script>

<style scoped>

</style>
